<template>
  <!-- {{ entity }} -->
  <div class="item-box">
    <div class="title">
      <CpuSvg v-if="entity.title === 'CPU'"></CpuSvg>
      <MemorySvg v-else-if="entity.title === '内存'"></MemorySvg>
      <StorageSvg v-else></StorageSvg>
      <span class="title-info">{{ entity.title }}</span>
    </div>
    <div class="box-content">
      <div class="content-left">
        <div class="item" style="width: 1.23rem">
          <div class="label">{{ entity.name }}</div>
          <div class="value">
            <span>{{ entity.total }}</span>
          </div>
        </div>
        <div class="item">
          <div class="label">已使用</div>
          <div class="value">
            <span>{{ entity.used }}</span>
          </div>
        </div>
        <div
          class="vpt-chart"
          ref="baseEchartRef"
          :style="{ ...echartStyle }"
        ></div>
      </div>
      <div class="content-right pointers">
        <div
          class="di"
          @click="goDetail(entity, '低频')"
        >
          <div class="label">低频预警</div>
          <div class="value">
            <span :style="{ color: '#FFC300' }"
              >{{ entity.dp_num }}台</span
            >
            <img
              class="icon"
              src="../../../../../../assets/img/theme1/warn-icon.png"
            />
          </div>
        </div>
        <div
          class="gao"
          @click="goDetail(entity, '高频')"
        >
          <div class="label">高频预警</div>
          <div class="value">
            <span :style="{ color:'#F53F3F' }"
              >{{ entity.gp_num }}台</span
            >
            <img
              class="icon"
              src="../../../../../../assets/img/theme1/danger-icon.png"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick, defineEmits } from "vue";
import * as echarts from "echarts/core";
import { fontSize } from "@/utils/rem/rem.js";
import CpuSvg from "../SvgTemplate/CpuSvg.vue";
import StorageSvg from "../SvgTemplate/StorageSvg.vue";
import MemorySvg from "../SvgTemplate/MemorySvg.vue";

const props = defineProps({
  entity: { type: Object, default: () => ({}) },
  width: { type: String, default: "1.95rem" },
  height: { type: String, default: "0.5rem" },
  center: { type: Array, default: () => ["33%", "52%"] },
  radius: { type: Array, default: () => ["55%", "90%"] },
});

const baseEchartRef = ref(null);
const echartStyle = computed(() => {
  const { width, height } = props;
  const reg = /%$/;
  return {
    width: reg.test(width) ? width : `${width}`,
    height: reg.test(height) ? height : `${height}`,
  };
});

const chartOption = ref({});

let baseChart = null;
watch(
  () => props.entity,
  () => {
    nextTick(() => {
      getOption();
      initChart();
    });
  },
  { deep: true }
);

const chartData = computed(() => {
  return [
    { value: props.entity.percentageValue, name: "percentageValue" },
    { value: props.entity.percentageDrag, name: "percentageDrag" },
  ];
});

function getOption() {
  chartOption.value = {
    title: {
      text:
        "{name|" + "使用率" + "}\n{val|" + props.entity.percentageValue + "%}",
      left: "75.5%",
      top: "-20%",
      textAlign: "center",
      textStyle: {
        color: "#4E5969",
        fontWeight: 400,
        height: fontSize(30),
        // fontFamily: "HarmonyOS_SansSC_Medium",
        rich: {
          name: {
            fontSize: fontSize(14),
            fontWeight: "400",
            color: "#4E5969",
            padding: [10, 0],
            fontFamily: "HarmonyOS_SansSC_Medium",
          },
          val: {
            fontSize: fontSize(18),
            padding: [0, 0, 0, 4],
            marginTop: fontSize(15),
            fontFamily: "HarmonyOS_SansSC_Medium",
            // color: "#00B675",
            // fontWeight: 700,
            color: props.entity.centerFontColor,
          },
        },
      },
      ...props.titleProps,
    },
    tooltip: {
      show: false,
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
      show: false,
    },
    series: [
      {
        name: props.entity.name,
        center: props.center,
        type: "pie",
        radius: props.radius,
        selectedMode: false,
        hoverAnimation: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        labelLine: {
          show: false,
        },
        data: chartData.value,
        // color: "#1e3651",
        color: props.entity.percentageColor,
        // color: ['#00B675', '#1e3651']
      },
    ],
  };
}

const initChart = () => {
  // if (!baseChart) {
  baseChart = echarts.init(baseEchartRef.value);
  randerChart();
  window.addEventListener("resize", () => {
    setTimeout(() => {
      baseChart.resize();
      throttle(getOption, 500)();
      randerChart();
    }, 100);
  });
  // }
};

const randerChart = () => {
  baseChart.setOption(chartOption.value, true);
};

const emit = defineEmits(["show-dialog"]);

const goDetail = (item, val) => {
  emit("show-dialog", item, val);
};

const cpuSvgContent = CpuSvg.default;

onMounted(() => {
  setTimeout(() => {
    getOption();
    initChart();
  }, 1500);
});
</script>

<style lang="less" scoped>
.pointers {
  cursor: default;
}
.pointers:hover {
  cursor: pointer; /* 手指指针光标 */
}
.item-box {
  width: 5.65rem;
  height: 1.12rem;
  padding: 0.18rem;
  // background: #e6ebf5;
  background: url("../../../../../../assets/img/theme3/cloud_tem.png");
  // background-size: cover;
  background-size: 100% 100%;
  border-radius: 0.04rem;
  .title {
    display: flex;
    // font-family: HarmonyOS_Sans_SC_Medium;
    font-weight: 500;
    font-size: 0.2rem;
    color: #151a24;
    letter-spacing: 0;
    line-height: 0.2rem;

    .title-info {
      margin-left: 0.08rem;
    }
  }
  .box-content {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    margin-top: 0.12rem;
    // height: 100%;

    .content-left {
      width: 3.2rem;
      height: 0.5rem;
      background: #fff;
      // border: 1px solid #0a3268cf;
      padding: 0.12rem;
      display: flex;
      .item {
        width: 0.7rem;
        margin-top: 0.05rem;
      }
      .label {
        font-size: 0.14rem;
        color: #4e5969;
      }
      .value {
        font-size: 0.18rem;
        color: #151a24;
        margin-top: 0.08rem;
        font-family: HarmonyOS_SansSC_Medium;
      }
    }
    .content-right {
      display: flex;
      .item {
        width: 0.72rem;
        height: 0.5rem;
        padding: 0.12rem;
        background: #fff;
        // border: 1px solid #0a3268cf;
        margin-left: 0.12rem;
        border-radius: 0.04rem;
      }
      .di {
        width: 0.72rem;
        padding: 0.12rem;
        height: 0.48rem !important;
        background: url("../../../../../../assets/img/theme3/di.png") no-repeat !important;
        background-size: 100% 100% !important;
        // border: 1px solid #ffc300b3 !important;
        border: none;
        margin-left: 0.12rem;
        border-radius: 0.04rem;
      }
      .gao {
        width: 0.72rem;
        padding: 0.12rem;
        height: 0.48rem !important;
        background: url("../../../../../../assets/img/theme3/gao.png") no-repeat !important;
        background-size: 100% 100% !important;
        // border: 1px solid #e22e2eb3 !important;
        border: none;
        margin-left: 0.12rem;
        border-radius: 0.04rem;
      }
      .label {
        margin-top: 0.04rem;
        font-size: 0.14rem;
        color: #4e5969;
      }
      .value {
        font-size: 0.18rem;
        color: #ffffff;
        margin-top: 0.08rem;
        display: flex;
        align-items: center;
        .icon {
          width: 0.14rem;
          height: 0.14rem;
          margin-left: 0.06rem;
        }
      }
    }
  }
}
</style>
